// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, TextInput, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import Icon from 'react-native-vector-icons/Ionicons';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast, Button, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { orderList } from '../../../module/module'

// 引入样式
import Style from '../style/style.js';

// 引入公用组件
import { Status, NavBar, ScrollableTabBar, BlockBox, RnFlatList, CacheImage, OrderOperation } from '../../../components/index.js'

// 引入专用组件
// import { } from './components'

// 引入工具包
import { u197, background } from '../../../util/images.js'
import { press, borderTop, size, ScreenWidth, ScreenHeight, pathHead, path, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage, ImageFileSave, WeChatShareToSession, onSelectiveRefresh } from '../../../util/utils.js'

class Orders extends Component {

    constructor(props) {
        super(props)
        this.state = {
            refreshing: false,
            searchBackgroundColor: '#ccc',
            loading: false,
            dataList: defaultDataList
        }
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            // ...耗时较长的同步的任务...
            // this.showLoadingData()
            this.loading = Toast.loading('加载中', 0)
            this.handleData().finally(() => { Portal.remove(this.loading) })
        });
    }

    handleData(options, type) {
        const { data } = this.props
        return new Promise((resolve, reject) => {
            let query = {
                status: data.status,
                ...defaultPage.call(this),
                ...options
            }
            data.status ? query.status = data.status : delete query.status
            orderList(query).then(res => {
                console.log(res)
                resolve(res)
                if (type && type == 'selectiveRefresh') {
                } else {
                    concatDataList.call(this, res)
                }
            }).catch(error => {
                console.log(error, 11111)
            })
        }).catch(error => {
            console.error(error)
        })
    }

    onSelectiveRefresh = (data) => {
        onSelectiveRefresh.call(this, data)
    }

    onRefresh = () => {
        onRefresh.call(this)
    }

    onEndReached = () => {
        onEndReached.call(this)
    }

    onScroll = (e) => {
        const { searchBackgroundColor } = this.state
        if (e.nativeEvent.contentOffset.y >= size(366) - 44) {
            this.setState({
                searchBackgroundColor: '#e43130'
            })
        } else {
            this.setState({
                searchBackgroundColor: 'transparent'
            })
        }
    }

    renderStatus(order) {
        if (order.status == 1) { return '待付款' }
        if (order.status == 2) { return '待发货' }
        if (order.status == 3) { return '待收货' }
        if (order.status == 4) { return '已完成' }
        if (order.status == 5) { return '已取消' }
    }

    render() {
        const { refreshing, dataList } = this.state
        console.log(dataList)
        return (
            <RnFlatList
                style={{
                    flex: 1,
                    backgroundColor: '#f0f2f5',
                }}
                onScroll={this.onScroll}
                refreshing={refreshing}
                onRefresh={this.onRefresh}
                onEndReached={this.onEndReached}
                numColumns={1}
                removeClippedSubviews={true}
                data={dataList}
                renderItem={({ item, index }) => {
                    return (
                        <View
                            style={{
                                paddingLeft: 15,
                                backgroundColor: '#fff',
                                marginTop: 10
                            }}
                            key={item.id}
                        >
                            <TouchableOpacity
                                onPress={() => { Actions.orderInfo({ order: item }) }}
                                underlayColor='#fff'
                                style={{

                                }}
                            >
                                <View style={{}}>
                                    <View
                                        style={{
                                            flexDirection: 'row',
                                            alignItems: 'flex-start',
                                            justifyContent: 'space-between',
                                            paddingVertical: 15,
                                            paddingRight: 15,
                                            borderBottomColor: '#E5E5E5',
                                            borderBottomWidth: .5
                                        }}
                                    >
                                        <View
                                            style={{
                                                flexDirection: 'row',
                                                alignItems: 'center',
                                            }}
                                        >
                                            <Text style={{ fontSize: 14, lineHeight: 16, color: '#333' }}>订单编号：</Text>
                                            <Text style={{ fontSize: 14, lineHeight: 16, color: '#333' }}>{item.orderNo}</Text>
                                        </View>
                                        <Text style={{ fontSize: 14, lineHeight: 16, color: '#f9a63f' }}>
                                            {this.renderStatus(item)}
                                        </Text>
                                    </View>
                                    <View
                                        style={{
                                            paddingTop: 15,
                                            paddingRight: 15,
                                            borderBottomColor: '#E5E5E5',
                                            borderBottomWidth: .5
                                        }}
                                    >
                                        {item.orderGoodsList.map((orderItem, orderIndex) => (
                                            <View
                                                style={{
                                                    flexDirection: 'row',
                                                    marginBottom: 15,
                                                }}
                                                key={orderIndex}
                                            >
                                                <View style={{
                                                    width: 80,
                                                }}>
                                                    <CacheImage
                                                        resizeMod={"contain"}
                                                        style={{
                                                            width: 80,
                                                            height: 80,
                                                        }}
                                                        source={{ uri: `${pathHead}${orderItem.goodsMainPic}` }}

                                                    />
                                                </View>
                                                <View style={{
                                                    height: 80,
                                                    marginLeft: 10,
                                                    flex: 1,
                                                    justifyContent: 'space-between',
                                                }}>
                                                    <View style={{ flex: 1 }}>
                                                        <Text numberOfLines={2} ellipsizeMode={'tail'} style={{ fontSize: 14, color: '#000', lineHeight: 18, marginBottom: 5 }}>{orderItem.goodsName}</Text>
                                                        <Text numberOfLines={1} ellipsizeMode={'tail'} style={{ fontSize: 12, color: '#61676F', lineHeight: 16, marginBottom: 5 }}>{orderItem.goodsAttribute}</Text>
                                                    </View>
                                                    <View style={{
                                                        flexDirection: 'row',
                                                        justifyContent: 'space-between',
                                                        alignItems: 'center',
                                                    }}>
                                                        <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>x{orderItem.goodsNumber}</Text>
                                                        <Text style={{ fontSize: 14, color: '#E5C67B', lineHeight: 16, }}>¥{orderItem.goodsPrice}</Text>
                                                    </View>
                                                </View>
                                            </View>
                                        ))}
                                        {item.orderGoodsList.length <= 0 && (
                                            <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>代理订单</Text>
                                        )}
                                    </View>
                                    <View
                                        style={{
                                            flexDirection: 'row',
                                            alignItems: 'center',
                                            justifyContent: 'space-between',
                                            paddingVertical: 10,
                                            paddingRight: 15
                                        }}
                                    >
                                        <View style={{}}>
                                            <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>应付金额：¥{item.orderMoney}</Text>
                                        </View>
                                        <OrderOperation
                                            order={item}
                                            orderType="list"
                                            onOperationEnd={() => {
                                                this.onRefresh(item)
                                            }}
                                            onDelete={() => {
                                                this.onSelectiveRefresh(item)
                                            }}
                                        />
                                    </View>
                                </View>
                            </TouchableOpacity>
                        </View>
                    )
                }}
            />
        );
    }
}


export default connect(({ user, categoryList }) => ({
    user, categoryList
}))(pureRender(Orders))
